<template>
	<view class="f32 mt20">
		<view class="mt20 reply-input pl20 pt20 pr20 pb40">
			<textarea
				placeholder="请输入回复内容"
				placeholder-class="place-class"
				@input="textInput"
				v-model="inputText"
				:adjust-position="true"
			></textarea>
			<view class="mt20"
				><reportRecord
					:is-multiple="false"
					@upload="uploadRecord"
					:audioUrl="audioList"
					@delete="delRecord"
				></reportRecord
			></view>
		</view>
	</view>
</template>

<script>
import reportRecord from '@/subPackagesLog/components/reportRecord/reportRecord.vue'
export default {
	emits: ['input', 'record'],
	components: {
		reportRecord,
	},
	props: {
		localData: {
			type: Object,
			default() {
				return {}
			},
		},
		dataIndex: [Number, String],
	},
	data() {
		return {
			inputType: 1, //1语音输入，2文字输入
			inputText: '',
			itemData: {},
			audioList: [],
		}
	},
	mounted() {
		this.itemData = this.localData
	},
	methods: {
		//文字输入
		textInput(event) {
			this.$emit('input', this.inputText)
		},
		//切换输入方式
		changeInputType() {
			this.inputType = this.inputType === 1 ? 2 : 1
		},
		//上传语音
		uploadRecord(data) {
			this.audioList = []
			if (data && data.filePath) {
				this.audioList.push(data)
			}
			this.$emit('record', data)
		},
		//删除语单
		delRecord(data) {
			this.audioList = []
			this.$emit('record', null)
		},
		//填入文字
		inputContent() {
			this.inputText = this.itemData.placeholder
			this.$emit('input', this.inputText)
		},
	},
	watch: {
		localData(val) {
			this.itemData = val
		},
	},
}
</script>

<style scoped lang="scss">
.reply-input {
	background-color: #eeeeee;
	border-radius: 10rpx;
}
.place-class {
	color: $tag-color;
	font-size: 32rpx;
}
textarea {
	height: 160rpx;
	width: auto;
	border: none;
	word-wrap: break-word;
	white-space: pre-line;
	background-color: #eeeeee;
}
.text-line {
	text-decoration: underline;
}
.press-button {
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: $primary-color;
	border-radius: 40rpx;
	font-size: 36rpx;
	color: #ffffff;
	padding: 0 8px;
	width: 60%;
}
.press-button::after {
	border: none !important;
}

.press-button[disabled]:not([type]) {
	color: #999999;
	background-color: #dcdff0;
}
.radius {
	border-radius: 10rpx;
}
</style>
